<template>
  <div class="box">
    <div class="home">
       <div class="phone_header">
      <phonenav :backcolor="backcolor" :type="type" />
    </div>
      <div class="homer">
        <div class="shbanner" style="">
          <div class="shflex">
            <img src="../assets/image/logo.png" alt="" class="navimg" />
            <hd id="navhd"></hd>
            <div class="phonedaohang" @click="flag = !flag">
              <span></span><span></span><span></span>
            </div>
          </div>
          <div class="shbzhanshi">
            <div class="shbtitle">
              <h1>定制 小程序 开发</h1>
              <p>
                无论是整体框架，还是局部体验，我们都力求在每一个细节中做到完美
              </p>
            </div>
          </div>
        </div>
      </div>
      <el-collapse-transition class="fade">
        <div class="nav" v-if="flag">
          <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>商城小程序</li>
            <li>生鲜小程序</li>
            <li>案例展示</li>
            <li>服务项目</li>
            <li>联系我们</li>
          </ul>
          <p>
            <span class="" @click="flag = !flag">X</span>
          </p>
        </div>
      </el-collapse-transition>
      <div class="content">
        <div class="contents">
          <div class="content_top_reason">
            <h1>选择我们的理由</h1>
          </div>
          <div class="reason_main">
            <div class="rmain_top">
              <el-card
                class="box-card reasoncard"
                shadow="never"
                v-for="(item, index) in reitemlist"
                :key="index"
              >
                <div class="text item reasonitem">
                  <div class="reitem_top">
                    <h2>{{ item.name }}</h2>
                    <p v-html="item.details"></p>
                  </div>
                  <div class="reitem_bottom">
                    <img :src="item.imageurl" alt="" />
                  </div>
                </div>
              </el-card>
            </div>
            <div class="rmain_center">
              <h1>我们熟悉小程序</h1>
              <div class="ramin_item">
                <div
                  class="ramin_iteminfo"
                  v-for="(item, index) in iteminfo"
                  :key="index"
                >
                  <div class="raitem_top">
                    <img :src="item.imageurl" alt="" />
                  </div>
                  <div class="raitem_bottom">
                    <h2>{{ item.name }}</h2>
                    <p>{{ item.details }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="rmain_bottom">
              <h1>服务行业</h1>
              <div class="ramin_item_two">
                <div
                  class="ramin_iteminfo_two"
                  v-for="(item, index) in iteminfotwo"
                  :key="index"
                >
                  <img :src="item.imageurl" alt="" />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="rmain_footer">
              <div class="ramin_item_footer">
                <div>不管哪个行业你的功能需求我们都得心应手</div>
                <div>咨询产品经理13482742882</div>
              </div>
            </div>
          </div>
        </div>
        <h2 class="content_con_top">我们的小程序案例</h2>
        <div class="content_con_main">
          <div
            class="content_con_main_card"
            v-for="(s, index) in stu"
            :key="index"
          >
            <el-card shadow="never" class="content_con_main_card_xian">
              <img :src="s.xianimg" />
              <span>{{ s.xianspan }}</span>
            </el-card>
            <el-card shadow="never" class="content_con_main_card_yin">
              <img :src="s.yinimg" />
            </el-card>
          </div>
        </div>
        <div class="center_footer_header">
          <div class="class">
            <div class="center_footer_center">
              <div class="center_footer_center_header">
                <h2 class="h2">观智旗下产品</h2>
              </div>
              <div class="center_footer_nei">
                <div
                  class="center_footer_neis"
                  v-for="(n, index) in name"
                  :key="index"
                >
                  <div class="center_footer_img">
                    <img :src="n.img" alt="" />
                  </div>
                  <div class="center_footer_zi">
                    <div class="center_footer_zi_header" :style="n.color">
                      {{ n.names }}
                    </div>
                    <div class="center_footer_nei_zi">
                      <span>{{ n.nei }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_footer_headers">
          <div class="classe">
            <div class="center_footer_center">
              <div class="center_footer_center_header">
                <h2>项目运作流程</h2>
              </div>
              <div class="center_footer_nei">
                <div
                  class="center_footer_neis"
                  v-for="(n, index) in names"
                  :key="index"
                >
                  <div class="imgsa"><img :src="n.img" alt="" /></div>
                  <div class="center_footer_zia">
                    <div class="center_footer_nei_zis">
                      <span v-html="n.nei"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 联系我们 -->
      <div class="about_contact">
        <div class="about_contact_box">
          <div class="about_contact_left">
            <div class="about_contact_left_div">联系我们</div>
            <div>
              <div
                class="about_contact_left_box"
                v-for="(con, index) in contact"
                :key="index"
              >
                <span class="about_contact_left_box_img"
                  ><img :src="con.img" alt=""
                /></span>
                <span class="about_contact_left_box_span">{{ con.name }}</span>
              </div>
            </div>
          </div>
          <div class="about_contact_right">
            <img src="../assets/image/vvv.jpg" alt="" />
          </div>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="about_bottom">
        <div class="about_bottom_box">
          <div class="about_bottom_top">
            <div>友情链接：</div>
            <div class="about_bottom_top_div">
              <a v-for="(li, index) in link" :key="index" class="link">{{
                li.name
              }}</a>
            </div>
          </div>
          <div class="about_bottom_botton">
            <div class="about_bottom_botton_top">
              <div>
                COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED
              </div>
              <div>Powered by:观智网络</div>
            </div>
            <div class="about_bottom_botton_botton">
              版权所有 上海观智网络科技有限公司
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import hd from "../components/Topnav.vue";
import phonenav from "../components/Phone_nav.vue";
export default {
  data() {
    return {
      flag: false,
      backcolor: "gzxcxtopbg.jpg",
      type:'image',
      contact: [
        { name: "电话 :134-8274-2882", img: require("../assets/image/C1.png") },
        { name: "QQ：1059681242", img: require("../assets/image/C2.png") },
        {
          name: "邮箱：haoljq@163.com",
          img: require("../assets/image/C3.png"),
        },
        {
          name: "地址：上海闵行区七宝国际智慧园区25幢908",
          img: require("../assets/image/C4.png"),
        },
      ],
      link: [
        { name: "小程序开发" },
        { name: "上海小程序开发" },
        { name: "小程序商店" },
        { name: "微信小程序开发文档" },
        { name: "分销商城小程序" },
        { name: "电商小程序开发" },
        { name: "百家号" },
        { name: "商城小程序" },
        { name: "微信小程序开发API" },
      ],
      name: [
        {
          id: 1,
          img: require("@/assets/image/img/gzxcxa6.jpg"),
          names: "观智科技",
          nei: "主要服务企业，小程序开发、网站建设等技术与设计",
          color: "color:#17AFE0",
        },
        {
          id: 2,
          img: require("@/assets/image/img/gzxcxa8.jpg"),
          names: "同城生活家",
          nei: "定位服务身边生活分类小程序，如二手，租房，交友，转让等信息发布",
          color: "color:#009B0F",
        },
        {
          id: 3,
          img: require("@/assets/image/img/gzxcxa9.jpg"),
          names: "微一页",
          nei:
            "为个人或商家提供可在线3-5步就可以生成的小程序和网页，方便用户分享到群，好友，朋友圈",
          color: "color:#FF4902",
        },
      ],
      names: [
        {
          id: 1,
          img: require("@/assets/image/img/未命名-2.png"),
          name: "售前",
          // names:'观智科技',
          nei: "<b>主要服务企业，小程序开发、网站建设等技术与设计</b>",
          font: "font-size:14px",
          background: "background-color:#2E365a",
        },
        {
          id: 2,
          img: require("@/assets/image/img/未命名-1.png"),
          name: "售前",
          background: "background-color:#028ccd",
          // names:'同城生活家',
          nei:
            "<b>●项目启动会</b> 分析客户需求 --准备项目资料--探讨设计方向--出具体时间进度--确认实施方案 <b>●创间设计</b> 界面设计和提案到确认 <b>●前端开发</b> 界面设计和提案到确认 <b>●后台开发</b> 程序代码编写--后台内容添加 <b>●网站测试</b> 资料录入-功能测试-整合修改-项目验收 <b>●版本提交</b> 打包提交给微信平台等等审核",
        },
        {
          id: 3,
          img: require("@/assets/image/img/未命名-3.png"),
          name: "售后",
          font: "font-size:14px",
          background: "background-color:#2E365a",
          // names:'微一页',
          nei: "<b>●交付上线 ●客户培训 ●版本升级</b>",
        },
      ],
      reitemlist: [
        {
          name: "可以多端开发",
          details:
            "观智网络可提供不同小程序开发，包括，微信小程序，字节跳动小程序，支付宝小程序，百度小程序开发,也可提供独力的前端开发",
          imageurl: require("../assets/image/img/ka_1.png"),
        },
        {
          name: "项目周期控制后期性能好扩展",
          details:
            "我们认为做好一个项目，在时间已周期上也应有个很好的把控，我们有着非常出色的项目经理，可以顺利的完成项目，也有技术过硬的开发人员随时应对各种安全已后期加加功能问题",
          imageurl: require("../assets/image/img/ka_2.png"),
        },
        {
          name: "百家客户服务",
          details:
            "我们在这2年多的时间里开发过百个小程序，在技术方面有着更多的丰富经验可以传递。同时也服务过很多知名企业，例如MUMUSO,静安区文明办，百果园，光明培儿贝瑞等众多品牌企业。",
          imageurl: require("../assets/image/img/ka_3.png"),
        },
        {
          name: "可以多端开发",
          details:
            '只要我们成功合作，只要符和相关要求，如果是电商类，有相关权限和资质 将赠送微信小程序直播 。也可赠送我们自主研发的宣传型小程序<a href="#/Reason" style="color:red;text-decoration: none;">立即获取</a>',
          imageurl: require("../assets/image/img/ka_4.png"),
        },
      ],
      iteminfo: [
        {
          imageurl: require("../assets/image/img/l1.png"),
          name: "2016年9月深入了解",
          details: "观智科技开发团队小程序9月内测就开始深入了解",
        },
        {
          imageurl: require("../assets/image/img/l2.png"),
          name: "已服务600+客户，技术更成熟",
          details: "整体开发流程以技术已非常熟悉",
        },
        {
          imageurl: require("../assets/image/img/l3.png"),
          name: "API得心应手",
          details: "例如，获取地图位置，数据上传下载，支付等API",
        },
      ],
      iteminfotwo: [
        { imageurl: require("../assets/image/img/t1.png"), name: "电商平台" },
        { imageurl: require("../assets/image/img/t2.png"), name: "工具" },
        { imageurl: require("../assets/image/img/t3.png"), name: "社交" },
        { imageurl: require("../assets/image/img/t8.png"), name: "房地产" },
        { imageurl: require("../assets/image/img/t9.png"), name: "生活服务" },
        { imageurl: require("../assets/image/img/t4.png"), name: "富媒体" },
        { imageurl: require("../assets/image/img/t5.png"), name: "旅游" },
        { imageurl: require("../assets/image/img/t6.png"), name: "餐饮" },
        { imageurl: require("../assets/image/img/t10.png"), name: "教育" },
        { imageurl: require("../assets/image/img/t11.png"), name: "政务民生" },
      ],
      logo: require("../assets/image/logo.png"),
      gz_07: require("../assets/image/gz_07.png"),
      nav: [
        { title: "首页" },
        { title: "关于我们" },
        { title: "商城小程序" },
        { title: "生鲜小程序" },
        { title: "案例展示" },
        { title: "服务项目" },
        { title: "联系我们" },
      ],
      stu: [
        {
          xianimg: require("../assets/image/img/gzxcxa1.jpg"),
          xianspan: "晒秋布鞋",
          yinimg: require("../assets/image/img/ca1.jpg"),
        },
        {
          xianimg: require("../assets/image/img/gzxcxa2.jpg"),
          xianspan: "客邻名片",
          yinimg: require("../assets/image/img/ca2.jpg"),
        },
        {
          xianimg: require("../assets/image/img/gzxcxa7.jpg"),
          xianspan: "Ashamaira时装",
          yinimg: require("../assets/image/img/ca3.jpg"),
        },
        {
          xianimg: require("../assets/image/img/gzxcxa3.jpg"),
          xianspan: "勤农源",
          yinimg: require("../assets/image/img/ca4.jpg"),
        },
        {
          xianimg: require("../assets/image/img/gzxcxa4.jpg"),
          xianspan: "西柚买",
          yinimg: require("../assets/image/img/ca5.jpg"),
        },
        {
          xianimg: require("../assets/image/img/gzxcxa5.jpg"),
          xianspan: "好慷在家",
          yinimg: require("../assets/image/img/ca6.jpg"),
        },
      ],
      show: true,
      flag: false,
    };
  },
  components: {
    hd,
    phonenav
  },
  methods: {
    guan() {
      this.show = false;
    },
  },
};
</script>
<style  lang="less" scoped>
.box {
  overflow: hidden;
}
.fade {
  display: flex;
  justify-content: space-between;
  span {
    color: white;
  }
}
 .phone_header{
    width: 100%;
    display: none;
  }
.home { 
  .homer {
    //  z-index:1 ;
    width: 100%;
    // max-width: 5000px;
    // min-width: 1024px;
    background: url("../assets/image/gzxcxtopbg.jpg") no-repeat;
    background-size: 100%;
    padding-bottom: 10%;
    .shbtitle {
      h1 {
        text-align: center;
        color: white;
        font-size: 0.8rem;
        padding: 3% 0;
      }
      p {
        color: white;
        font-size: 0.4rem;
      }
    }
  }
  // overflow: hidden;
  // 1
  .shop_m_one {
    width: 100%;
    height: 580px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    div {
      width: 33.33%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .shop_m_t_con {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: auto;
        hr {
          width: 100%;
          // height: 1px;
        }
        img {
          margin-bottom: 15px;
          width: 100px;
          height: 100px;
        }
        p {
          line-height: 25px;
          color: white;
        }
        span {
          color: white;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
    .shop_m_t_warp {
      background: #05a7bc;
    }
    .shop_m_t_warp:first-child {
      background: #00b050;
    }
    .shop_m_t_warp:last-child {
      background: #212121;
    }
  }
}
@media only screen and (min-width: 1024px) {
  .navimg {
    display: none;
  }
  .phonedaohang {
    display: none;
  }
  .shflex {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
  }
  .shbzhanshiimg {
    width: 500px;
    height: 350px;
  }
  .shbzhanshi {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 800px;
    margin: 0 auto;
  }
  .homer {
    //  z-index:1 ;
    width: 100%;
    height: auto;
    // max-width: 5000px;
    // min-width: 1024px;
    // background: url("../assets/image/shop/bj_c.jpg");
  }
  .shflex img {
    width: 350px;
    height: 80px;
  }
  .shbanner {
    width: 95%;
    padding-top: 20px;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  .shbanner ul {
    display: flex;
    font-size: 19px;
  }
  .shbanner ul li {
    list-style: none;
    padding-left: 10px;
    color: white;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 1024px) {
  #navhd {
    display: none;
  }
  .nav {
    z-index: 100;
    display: flex;
    left: 0;
    width: 100%;
    height: 200px;
    line-height: 25px;
    justify-content: space-between;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    p {
      padding-right: 10px;
    }
    span {
      display: block;
      width: 25px;
      font-size: 26px;
      font-weight: 600;
      text-align: center;
      background: white;
      color: #000;
    }
  }
  .nav ul {
    margin: 0;
    width: 100%;
    height: 100%;
    flex-direction: row;
    display: flex;
    padding-left: 15px;
    align-items: flex-start;
    flex-direction: column;
  }
  .nav ul li {
    display: flex;
    // border: 1px solid red;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    color: white;
  }
  .shbzhanshi {
    display: none;
  }
  .shflex ul {
    display: none;
  }
  .shflex {
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    align-items: center;
    height: 100%;
    display: flex;
  }
  .shflex img {
    width: 150px;
    height: 30px;
  }
  .shbanner {
    width: 100%;
    height: 50px;
    // background: url("../assets/image/shop/bj_c.jpg");
    // border: 1px solid red;
  }
  .shbzhanshiimg {
    display: none;
  }
  .phonedaohang span {
    display: block;
    width: 90%;
    height: 1px;
    background: #ccc;
  }
  .phonedaohang {
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 15px;
    border: 1px solid #ccc;
  }
}
body {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.scroll-menu {
  display: flex;
  text-align: center;
  height: 25px;
  overflow: hidden;
}
.scroll-menu li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.scroll-menu li {
  height: 20px;
  list-style: none;
}
.scroll-menu li * {
  display: inline-block;
  font-size: 18px;
  line-height: 23px;
}
.scroll-menu li a {
  margin-top: -25px;
  transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
.scroll-menu li a:hover {
  margin-top: 0;
}
.scroll-menu li a:before {
  content: attr(data-text);
  display: block;
  color: #f3f3f3;
}
.about_contact {
  width: 100%;
  height: 450px;
  background-color: rgb(60, 174, 226);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about_contact_box {
  width: 75%;
  height: 365px;
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  color: white;
}
.about_contact_left {
  width: 50%;
  display: flex;
  flex-flow: column;
  font-size: 22px;
}
.about_contact_left_box {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.about_contact_left_div {
  width: 100%;
  font-size: 25px;
  display: flex;
  margin-left: 80px;
  font-weight: 600;
}
.about_contact_right {
  width: 40%;
}
.about_contact_left_box_img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: rgb(33, 38, 82);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}
.about_bottom {
  width: 100%;
  height: 390px;
  background-color: rgb(54, 53, 53);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.about_bottom_box {
  height: 350px;
  width: 75%;
  margin: 0 auto;
  font-size: 13.5px;
  color: rgb(218, 218, 218);
}
.about_bottom_top {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid rgb(107, 107, 107);
  display: flex;
  justify-content: left;
  flex-flow: column;
  text-align: left;
}
.about_bottom_top div {
  line-height: 40px;
}
.about_bottom_top_div {
  display: flex;
  flex-flow: row;
}
.link {
  cursor: pointer;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;
}
.link:hover {
  color: rgb(57, 169, 243);
}
.about_bottom_botton {
  width: 100%;
  height: 150px;
  margin-top: 30px;
  display: flex;
  flex-flow: column;
}
.about_bottom_botton_top {
  width: 100%;
  height: 40px;
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.about_bottom_botton_botton {
  text-align: left;
}

@media (max-width: 812px) {
  .phone_header{
    display: block;
  }
  body {
    width: 100%;
    margin: 0 auto;
  }
  .about_contact {
    width: 100%;
    height: auto;
    background-color: rgb(60, 174, 226);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .about_contact_box {
    width: 75%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    color: white;
  }
  .about_contact_left {
    width: 100%;
    display: flex;
    flex-flow: column;
    font-size: 22px;
  }
  .about_contact_left_box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: row;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .about_contact_left_div {
    width: 60%;
    font-size: 25px;
    display: flex;
    font-weight: 600;
  }
  .about_contact_left_box_span {
    width: 100%;
    text-align: left;
  }
  .about_contact_right {
    width: 40%;
    margin: 0 auto;
  }
  .about_contact_right img {
    width: 100%;
  }
  .about_contact_left_box_img {
    width: 70px;
    height: 50px;
    border-radius: 100px;
    background-color: rgb(33, 38, 82);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
  }
  .about_bottom {
    width: 100%;
    height: auto;
    background-color: rgb(54, 53, 53);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    color: white;
  }
  .about_bottom_box {
    height: auto;
    width: 75%;
    margin: 0 auto;
    font-size: 13.5px;
    color: rgb(218, 218, 218);
  }
  .about_bottom_top {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgb(107, 107, 107);
    display: flex;
    justify-content: left;
    flex-flow: column wrap;
    text-align: left;
  }
  .about_bottom_top div {
    width: 100%;
    height: auto;
    line-height: 40px;
  }
  .about_bottom_top_div {
    display: flex;
    flex-flow: row wrap;
  }
  .link {
    cursor: pointer;
    font-size: 10px;
    padding-right: 20px;
  }
  .link:hover {
    color: rgb(57, 169, 243);
  }
  .about_bottom_botton {
    width: 100%;
    height: auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    font-size: 12px;
  }
  .about_bottom_botton div {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .about_bottom_botton_top {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
  }
  .about_bottom_botton_botton {
    text-align: left;
  }
}

@media (max-width: 812px) {
  body {
    width: 100%;
    margin: 0 auto;
  }
  .homer{
    display: none;
  }
  .phone_header{
    display: block;
  }
  .about_contact {
    width: 100%;
    height: auto;
    background-color: rgb(60, 174, 226);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
  .about_contact_box {
    width: 75%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    color: white;
  }
  .about_contact_left {
    width: 100%;
    display: flex;
    flex-flow: column;
    font-size: 22px;
  }
  .about_contact_left_box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: row;
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .about_contact_left_div {
    width: 100%;
    font-size: 25px;
    display: flex;
    margin-left: 80px;
    font-weight: 600;
  }
  .about_contact_left_box_span {
    width: 100%;
    text-align: left;
  }
  .about_contact_right {
    width: 45%;
    margin: 0 auto;
  }
  .about_contact_right img {
    width: 100%;
  }
  .about_contact_left_box_img {
    width: 70px;
    height: 50px;
    border-radius: 100px;
    background-color: rgb(33, 38, 82);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
  }
  .about_bottom {
    width: 100%;
    height: auto;
    background-color: rgb(54, 53, 53);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    color: white;
  }
  .about_bottom_box {
    height: auto;
    width: 75%;
    margin: 0 auto;
    font-size: 13.5px;
    color: rgb(218, 218, 218);
  }
  .about_bottom_top {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgb(107, 107, 107);
    display: flex;
    justify-content: left;
    flex-flow: column wrap;
    text-align: left;
  }
  .about_bottom_top div {
    width: 100%;
    height: auto;
    line-height: 40px;
  }
  .about_bottom_top_div {
    display: flex;
    flex-flow: row wrap;
  }
  .link {
    cursor: pointer;
    font-size: 10px;
    padding-right: 20px;
  }
  .link:hover {
    color: rgb(57, 169, 243);
  }
  .about_bottom_botton {
    width: 100%;
    height: auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    font-size: 12px;
  }
  .about_bottom_botton div {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .about_bottom_botton_top {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
  }
  .about_bottom_botton_botton {
    text-align: left;
  }
}
.content_top_reason {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.content_top_reason {
  text-align: center;
}
.reason_main {
  .rmain_top {
    width: 72.5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .reasoncard {
      background: #f5f3f3;
      margin-top: 40px;
      padding: 1% 2%;
      width: 430px;
      margin: 20px auto;
      .reasonitem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .reitem_top {
          width: 75%;
          h2 {
            color: #248acb;
            font-size: 0.4rem;
            margin: 0px;
          }
          p {
            color: #666;
            font-size: 0.3rem;
          }
        }
        .reitem_bottom {
          width: 20%;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
.rmain_center {
  width: 100%;
  height: auto;
  padding-bottom: 2%;
  background: #f1f1f1;
  h1 {
    text-align: center;
    padding: 3% 4%;
  }
  .ramin_item {
    width: 72.5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 20px;
    .ramin_iteminfo {
      width: 260px;
      background: white;
      border-radius: 20px;
      padding: 4% 3%;
      margin: auto;
      border: 1px solid #e7e6e6;
      margin-top: 20px;
      .raitem_top {
        display: flex;
        align-items: center;
        padding: 2% 0;
        justify-content: center;
        img {
          width: 33%;
        }
      }
      .raitem_bottom {
        h2 {
          color: #55bc60;
          text-align: center;
          font-size: 0.35rem;
          @media (max-width: 700px) {
            font-size: 0.4rem;
          }
        }
        p {
          color: black;
          padding: 0 2%;
          text-align: center;
          font-size: 0.35rem;
          @media (max-width: 700px) {
            font-size: 0.35rem;
          }
        }
      }
    }
  }
}
.rmain_bottom {
  width: 100%;
  height: auto;
  background: #009c10;
  padding-bottom: 20px;
  color: white;
  h1 {
    margin: 0px;
    padding: 2%;
    text-align: center;
  }
  .ramin_item_two {
    width: 72.5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .ramin_iteminfo_two {
      margin-top: 10px;
      margin: auto;
      text-align: center;
      width: 20%;
      img {
        width: 50%;
      }
      div {
        color: white;
        font-size: 0.3rem;
        @media (max-width: 700px) {
          font-size: 0.2rem;
        }
      }
    }
  }
}
.rmain_footer {
  background: #038310;
  width: 100%;
  padding: 2% 0 2% 0;
  .ramin_item_footer {
    width: 72.5%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div:first-child {
      color: white;
      font-size: 0.3rem;
      @media (max-width: 700px) {
        font-size: 0.2rem;
      }
    }
    div:last-child {
      color: white;
      background: url(../assets/image/img/gzxcxp.jpg) no-repeat left center;
      font-size: 0.25rem;
      padding-left: 20px;
      background-size: 20px;
      @media (max-width: 700px) {
        padding-left: 10px;
        font-size: 0.2rem;
        background-size: 10px;
      }
    }
  }
}
.header {
  width: 100%;
  height: 705px;
  background-size: 100% 100%;
  background: url("../assets/image/gzxcxtopbg.jpg") no-repeat center center;
}
.header_top {
  width: 100%;
  height: 140px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-top: -50px;
  padding-top: 20px;
}
.header_top_left img {
  width: 380px;
}
.header_top_right {
  width: 48%;
  display: flex;
}
.header_top_right a {
  width: 110px;
  color: white;
  text-decoration: none;
}
.header_con {
  height: 200px;
  margin-top: 50px;
  text-align: center;
  h1 {
    font-size: 1rem;
    color: white;
  }
}
.header_con img {
  margin-left: 28%;
}
.header_con p {
  text-align: center;
  width: 100%;
  color: white;
  font-size: 24px;
  height: 80px;
  line-height: 80px;
}
.header_about {
  height: 100px;
  line-height: 100px;
}
.content_con_top {
  margin: 50px 0 50px 0;
  color: #2e365a;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  display: block;
}
.content_con_main {
  margin: 0 auto;
  width: 72.5%;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  margin-bottom: 50px;
}
.content_con_main_card {
  width: 500px;
  position: relative;
  margin: 0 auto;
  margin-top: 45px;
}
.content_con_main_card_xian {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}
.content_con_main_card_xian img {
  width: 32%;
  height: 32%;
  margin-top: 20px;
  margin-left: 34%;
}
.content_con_main_card_xian span {
  @media (max-width: 375px) {
    font-size: 16px;
  }
  font-size: 20px;
  font-weight: normal;
  display: block;
  margin-top: 15px;
  text-align: center;
  color: #666;
}
.content_con_main_card_yin {
  display: none;
  position: absolute;
  border-radius: 10px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #6ba0d4;
  text-align: center;
}
.content_con_main_card_yin img {
  margin-top: 1%;
  width: 40%;
  height: 40%;
}
.content_con_main_card:hover .content_con_main_card_yin {
  display: block;
}
.center_footer_header {
  width: 100%;
  // border: 1px solid red;
  padding-bottom: 20px;
  background-color: #f1f1f1;
}
.center_footer_center {
  width: 100%;
  height: auto;
  // margin: 0 auto;
  // border: 1px solid red;
  margin: 0 auto;
}
.center_footer_center_header {
  width: 100%;
  line-height: 40px;
  height: auto;
  // border: 1px solid red;
}
.center_footer_center_header h2 {
  // border: 1px solid red;
  font-size: 32px;
  height: 100px;
  line-height: 120px;
  // border: 1px solid red;
  text-align: center;
  font-family: "微软雅黑", "Arial", Helvetica, "microsoft yahei", "Verdana",
    "sans-serif";
}
.center_footer_nei {
  width: 50%;
  @media (max-width: 768px) {
    width: 72.5%;
  }
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  // border: 1px solid red;
}
.center_footer_neis {
  width: 100%;
  // border: 1px solid red;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.center_footer_img {
  width: 30%;
  // border: 1px solid red;
  display: flex;
  align-content: center;
  justify-content: center;
  @media screen and (min-width: 768px) {
    width: 100px;
    height: 100px;
  }
}
.center_footer_img img {
  width: 100%;
  // margin-top: 15px;
  // border: 1px solid red;
}
.center_footer_imgs {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  // margin-top: 15px;
  // border: 1px solid red;
  font-family: "微软雅黑", "Arial", Helvetica, "microsoft yahei", "Verdana",
    "sans-serif";
  background-color: #2e365a;
}
.center_footer_imgs span {
  width: 100%;
  height: 100%;
  text-align: center;
  // border: 1px solid red;
  line-height: 120px;
  font-size: 24px;
  font-weight: bold;
  color: white;
}
.center_footer_zi {
  width: 72.5%;
  height: 100%;
  padding-left: 10px;
  // border: 1px solid red;
  // margin-top: 10px;
}
.center_footer_zi_header {
  font-size: 24px;
  color: #17afe0;
  line-height: 60px;
  color: #666666;
  // border: 1px solid red;
  font-family: "微软雅黑", "Arial", Helvetica, "microsoft yahei", "Verdana",
    "sans-serif";
}
.center_footer_nei_zi {
  // border: 1px solid red;
  line-height: 30px;
}
.center_footer_nei_zi span {
  width: 100%;
  // border: 1px solid red;
  line-height: 30px;
  // margin-left: 20px;
}
.center_footer_headers {
  width: 100%;
  // border: 1px solid red;
  margin: 0 auto;
}
.center_footer_zheng {
  width: 20%;
  // border: 1px solid red;
}
.center_footer_zia {
  width: 70%;
  // border: 1px solid red;
  line-height: 10px;
  margin-top: 60px;
}
.center_footer_nei_zis {
  font-family: "微软雅黑", "Arial", Helvetica, "microsoft yahei", "Verdana",
    "sans-serif";
  width: 100%;
  font-size: 10px;
  // border: 1px solid red;
  margin-top: -55px;
  padding-left: 15px;
}
.center_footer_nei_zis span {
  // border: 1px solid red;
  line-height: 25px;
}
.class {
  width: 100%;
  //   border: 1px solid red;
  background-color: #f1f1f1;
  margin: 0 auto;
}
.classe {
  width: 100%;
  // border: 1px solid red;
  background-color: white;
  margin: 0 auto;
}
.center_footer_imga {
  width: 120px;
  // border: 1px solid red;
}
.imgsa {
  // border: 1px solid red;
  margin-top: 10px;
  // width: 50%;
  border-radius: 50%;
  @media screen and (min-width: 360px) {
    width: 100px;
    height: 100px;
  }
}
.imgsa img {
  // border: 1px solid red;
  width: 100%;
  margin-top: -13px;
}
.location {
  width: 100%;
  height: 90px;
  position: fixed;
  bottom: 0%;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d8f0ff;
  z-index: 1000;
}
.location_left {
  width: 55%;
  height: 70px;
  border-right: 1px solid #065686;
  display: flex;
  align-items: center;
}
.location_left ul {
  display: flex;
  justify-content: flex-start;
}
.location_left ul li {
  display: flex;
  width: 185px;
  height: 50px;
  flex-wrap: wrap;
  margin-right: 15px;
  color: white;
  border-radius: 10px;
}
.location_left ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-decoration: none;
}
.location_left ul li div {
  display: block;
  color: #065686;
  font-size: 14px;
  height: 20px;
}
.location_right {
  width: 20%;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
}
.location_right_phone {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  align-items: center;
}
.location_right_phone img {
  margin-left: 10px;
  margin-right: 5px;
}
.location_right_phone div {
  color: #065686;
  width: 200px;
}
.location_right_phone span {
  display: block;
  width: 200px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #065686;
}
</style>